<template>
  <div>
    
    <sky-panel title="下拉按钮组">
      <template v-slot:main>

      <sky-dropdown>
        <sky-dropdown-item  @click="handleClick">新增</sky-dropdown-item>
        <sky-dropdown-item >编辑</sky-dropdown-item>
        <sky-dropdown-item >作废</sky-dropdown-item>
        <sky-dropdown-item >下载</sky-dropdown-item>
        <sky-dropdown-item >导出</sky-dropdown-item>
      </sky-dropdown>

      </template>
    </sky-panel>

  <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

      &lt;sky-dropdown&gt;
        &lt;sky-dropdown-item  @click="handleClick"&gt;新增&lt;/sky-dropdown-item&gt;
        &lt;sky-dropdown-item &gt;编辑&lt;/sky-dropdown-item&gt;
        &lt;sky-dropdown-item &gt;作废&lt;/sky-dropdown-item&gt;
        &lt;sky-dropdown-item &gt;下载&lt;/sky-dropdown-item&gt;
        &lt;sky-dropdown-item &gt;导出&lt;/sky-dropdown-item&gt;
      &lt;/sky-dropdown&gt;
          
        </code>
        <code class="javascript">

      setup() {
        const handleClick=(e)=>{
            console.log(e)
        }
        return {
          handleClick
        }
      },
              
        </code>
    </pre>
    </div>
  </sky-code-panel>



  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const handleClick=(e)=>{
        console.log(e)
    }
    return {
      handleClick
    }
  },
})
</script>
